<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <title>千图网</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 100%;
            height: 50px;
            background-color: #10c55b;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .nav-content {
            line-height: 50px;
            font-size: 16px;
        }

        .nav-content a {
            text-decoration: none;
            color: #afffd0;
            width: 100%;
        }

        .nav-left {
            float: left;
        }

        .nav-right {
            float: right;
        }

        .nav-left li {
            display: inline-block;
            height: 100%;
            padding: 0 15px;
        }

        .nav-right li {
            display: inline-block;
            height: 100%;
            padding: 0 10px;
        }

        .s1 {
            display: inline-block;
            width: 15px;
            height: 7px;

            background-image: url(img/common.png);
            background-position: -185px -27px;
            color: #afffd0;
        }

        .s2 {
            display: inline-block;
            width: 25px;
            height: 20px;
            position: relative;
            top: 3px;
            right: 5px;

            background-image: url(img/common.png);
            background-position: -125px -381px;
            color: #afffd0;
        }

        .active {
            color: white;
            background-color: #01ac48;
        }

        .denglu {
            background-color: #01923d;
            padding: 5px 10px;
            border-radius: 5px;
        }

        .search {
            padding-top: 25px;
        }

        .search img {
            float: left;
        }

        .search-botton,
        .search-input {
            width: 600px;
            margin: 0 auto;
        }

        .search-input {
            width: 600px;
            height: 50px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .input-left {
            display: inline-block;
            width: 72px;
            height: 30px;
            margin: 5px;
            border-right: 1px solid #ccc;
            text-align: center;
            line-height: 30px;
            color: #333;
            font-size: 15px;
        }

        .s3 {
            display: inline-block;
            width: 15px;
            height: 7px;
            margin-left: 5px;
            background-image: url(img/common.png);
            background-position: -125px -30px;
            color: #afffd0;
        }

        .input {
            width: 438px;
            height: 48px;
            border: none;
            outline: none;
            list-style: none;
        }

        .input-right {
            display: inline-block;
            background-color: #12cc5f;
            width: 72px;
            height: 48px;
            float: right;
            border-radius: 3px;
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }

        .s4 {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 10px 20px;
            background-image: url(img/common.png);
            background-position: -60px 185px;
            color: #afffd0;
        }

        .search-botton {
            font-size: 12px;
            margin-top: 5px;
        }

        .search-botton a {
            text-decoration: none;
            padding: 3px;
        }

        .lv {
            color: #30cd71;
        }

        .hei {
            color: #333;
        }

        .hei:hover {
            color: #30cd71;
        }
        .footer {
            height: 320px;
        }

        .footer-top {
            height: 260px;
            padding-top: 35px;
            padding-bottom: 65px;
            padding-right: 60px;
        }

        .foot-top-left {
            float: left;
        }

        .foot-top-left ul {
            float: left;
            margin-left: 10px;
            margin-right: 30px;
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }

        .foot-top-left strong {
            display: block;
            margin-bottom: 20px;
        }

        .foot-top-left ul li {
            margin: 5px 0;
        }

        .foot-top-left ul a {
            font-size: 12px;
            color: #888;
            text-decoration: none;
        }

        .foot-top-right {
            float: right;
        }

        .b {
            font-size: 18px;
            color: #777;
            margin-top: 20px;
        }

        .foot-top-right a {
            text-decoration: none;
            color: #666;
            margin-bottom: 20px;
            font-size: 18px;
        }

        h5 {
            margin: 0;
        }

        .dian {
            width: 140px;
            height: 40px;
            background-color: #16e46b;
            border-radius: 3px;
            text-align: center;
            color: #fff;
            margin-top: 20px;
        }

        .s5 {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: relative;
            top: 10px;
            background-image: url(img/common.png);
            background-position: -60px -175px;
            color: #afffd0;
        }

        .s6 {
            display: inline-block;
            width: 30px;
            height: 30px;
           position: relative;
            top: 12px;
            background-image: url(img/common.png);
            background-position: -30px -175px;
            color: #afffd0;
        }

        .s7 {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: relative;
            top: 10px;
            background-image: url(img/common.png);
            background-position: 0 -175px;
            color: #afffd0;
        }

        .s8 {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: relative;
            top: 10px;
            background-image: url(img/common.png);
            background-position: -62px -205px;
            color: #afffd0;
        }

        .s9 {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: relative;
            top: 10px;
            margin-right: 30px;
            background-image: url(img/common.png);
            background-position: -30px -205px;
            color: #afffd0;
        }

        .s10 {
            display: inline-block;
            width: 30px;
            height: 30px;
            position: relative;
            top: 10px;
            background-image: url(img/common.png);
            background-position: 80px -20px;
            color: #afffd0;
        }

        .footer-bottom-left {
            float: left;
        }

        .footer-bottom-right {
            float: right;
            font-size: 12px;
            color: #888;
        }

        .footer-bottom-right a {
            color: #777;
            text-decoration: none;
        }

        .footer-bottom-left a {
            font-size: 12px;
            color: #888;
            text-decoration: none;
            margin: 0 5px;
        }

        .box {
            width: 100%;
            height: 320px;
            background-color: #000;
            margin: 30px 0;
            position: relative;
        }

        .img-list li {
            position: absolute;
            display: none;
        }

        .img-list li.current {
            display: block;
        }

        .indicator {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 20px;
            display: flex;
            justify-content: center;
            color: white;
        }

        .indicator li {
            width: 13px;
            height: 13px;
            background-color: #999;
            text-align: center;
            line-height: 15px;
            margin: 0 3px;
            border-radius: 50%;
            font-size: 14px;
        }

        .indicator li:hover {
            background-color: #10c55b;
        }

        .indicator li.active {
            background-color: #10c55b;
        }

        .indicator li {
            cursor: pointer;
        }

        .img-click>span {
            display: inline-block;
            width: 55px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            color: white;
            font-size: 50px;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: calc(50% - 75px);
            border-radius: 3px;
            display: none;
        }

        .c1 {
            float: left;
        }

        .c2 {
            position: absolute;
            right: 50px;
            top: 150px;
        }

        .s11 {
            display: inline-block;
            width: 31px;
            height: 31px;
            position: relative;
            top: 8px;
            margin-right: 5px;
            background-image: url(img/common.png);
            background-position: -95px -413px;
            color: #afffd0;
        }

        .s12 {
            display: inline-block;
            width: 26px;
            height: 31px;

            position: relative;
            top: 8px;
            margin-right: 5px;
            background-image: url(img/common.png);
            background-position: -127px -413px;
            color: #afffd0;
        }

        .info-1-top {
            margin: 20px 0;
        }

        .info-2-top div,
        .info-1-top div {
            color: #666;
            font-size: 24px;
            display: inline-block;
            margin-right: 20px;
        }

        .info-2-img a,
        .info-2-top a,
        .info-1-top a {
            font-size: 14px;
            color: #888;
            line-height: 37px;
            text-decoration: none;
        }

        .info-2-top a:hover,
        .info-1-top a:hover {
            color: orange;
        }

        .f {
            float: right;
            line-height: 37px;
            position: relative;
            top: 5px;
        }

        .info-1-img {
            height: 200px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 50px;
            position: relative;
        }

        .zhezao {
            width: 290px;
            height: 200px;
            text-align: center;
            color: white;
            position: absolute;
            top:200px;
            /* opacity: 0;    */
             visibility: hidden; 
            transition: all 0.5s ease;
            z-index: 200px;
        }
        .info-1-img .a{
            width: 290px;
            height: 100%;
            position: relative;   
        }
        .info-1-img .bg{
            position: absolute;  
            top: 0;
            left: 0; 
            width: 100%;
            height: 100%;
        }
        .zhezao div {
            width: 80%;
            margin: 50px auto;
            border-top: 1px solid white;
            border-bottom: 1px solid white;
            padding-bottom: 10px;
        }

        .zhezao div b {
            font-size: 14px;
        }

       .zi {
            display: inline-block;
        }

        .zi li {
            float: left;
            margin: 10px;
            list-style: none;
        }

        .info-2-top a {
            position: relative;
            top: 20px;
        }

        .info-2-img {
            height: 385px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 50px;
            position: relative; 
            margin-top: 20px;
        }
        .info-2-img a{
            width: 290px;
            height: 385px;
            position: relative; 
        }
        .abc{
            width: 290px;
            height: 385px;
            position: absolute;
            top:0;
            left: 0;
        }
        .abc:hover{
            background-color: #000;
            opacity: 0.3;
        }
       .imgabc{
            width: 290px;
            height: 385px;
       }

        .s13 {
            display: inline-block;
            width: 55px;
            height: 55px;

            background-image: url(img/common.png);
            background-position: 0 0;
        }

        .heart{
            width: 290px;
            position: absolute;
            top:-45px;
            /* display: none; */
            opacity: 0;
            transition: all 0.5s ease;
        }
         .s15 {
            display: inline-block;
            width: 45px;
            height: 45px;
            float: right;
            background-image: url(img/common.png);
            background-position: -5px -60px;
        }
        .s15:hover {
            background-image: url(img/common.png);
            background-position: -5px -115px;
        }
         .s14 {
            display: inline-block;
            width: 45px;
            height: 45px;
            float: right;
            background-image: url(img/common.png);
            background-position: -61px -60px;
        }
        .s14:hover {
            background-image: url(img/common.png);
            background-position: -61px -115px;
           
        }
    </style>
</head>

<body>
    <header class="header">
        <nav class="nav">
            <div class="nav-content container clearfix">
                <ul class="nav-left">
                    <li class="active"><a href="#" style="color:#fff">首页</a></li>
                    <li><a href="#">所有分类<span class="s1"></span></a></li>
                    <li><a href="#">设计创意</a></li>
                    <li><a href="#">办公创意</a></li>
                    <li><a href="#">● ● ●</a></li>
                </ul>
                <ul class="nav-right">
                    <li><a href="#"><span class="s2"></span>VIP中心</a></li>
                    <li><a href="#" class="denglu" style="color: white;font-size:12px;">请登录</a></li>
                    <li><a href="#" style="color: #01923d;font-size:10px;">免费注册</a></li>
                </ul>
            </div>
        </nav>
        <div class="search container clearfix">
            <img src="img/1.png" alt="">
            <div class="search-input">
                <span class="input-left">全站<span class="s3"></span></span>
                <input type="text" placeholder="800万免费设计素材任意下载" class="input">
                </input>
                <span class="input-right"><span class="s4"></span></span>
            </div>
            <div class="search-botton">
                热门搜索:
                <a href="#" class="lv">七夕</a>
                <a href="#" class="hei">详情页</a>
                <a href="#" class="lv">icon</a>
                <a href="#" class="hei">主图</a>
                <a href="#" class="lv">秋季</a>
                <a href="#" class="lv">PPT模版</a>
                <a href="#" class="hei">EXCEL模版</a>
                <a href="#" class="hei">首页</a>
                <a href="#" class="hei">个人简历</a>
                <a href="#" class="lv">装饰画</a>
            </div>
        </div>
    </header>
    <section class="box clearfix">
        <div class="container">
            <ul class="img-list">
                <li class="current"><a href="#"><img src="img/banner01.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner02.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner03.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner04.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner05.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner06.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner07.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/banner08.jpg" alt=""></a></li>
            </ul>
            <ul class="indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

        </div>
        <div class="img-click c1">
            <span class="prev"> 
                <
            </span>
        </div>
        <div class="img-click c2">
            <span class="next">
                >
            </span>
        </div>
    </section>
    <main class="main container">
        <div class="info-1">
            <div class="info-1-top clearfix">
                <div><span class="s11"></span> 精选专题
                </div>
                <a href="#">100万党建素材、PPT汇报模版无限下载，每天仅需0.18元立享VIP特权</a>
                <a href="#" class="f">更多 >></a>
            </div>
            <div class="info-1-img">
                <div class="a">
                    <a href="#" class="clearfix">
                            <img src="img/jxzt01.jpg" alt="">
                            <div class="bg"></div>
                            <section class="zhezao">
                                    <h2>和啤酒有关</h2>
                                    <b>啤酒是如何拯救世界的</b>
                        </section>
                   </a>
                </div>
                 <div class="a">
                    <a href="#" class="clearfix">
                            <img src="img/jxzt02.jpg" alt="">
                            <div class="bg"></div>
                            <section class="zhezao">
                                    <h2>和啤酒有关</h2>
                                    <b>啤酒是如何拯救世界的</b>
                        </section>
                   </a>
                </div>
                 <div class="a">
                    <a href="#" class="clearfix">
                            <img src="img/jxzt03.jpg" alt="">
                            <div class="bg"></div>
                            <section class="zhezao">
                                    <h2>和啤酒有关</h2>
                                    <b>啤酒是如何拯救世界的</b>
                        </section>
                   </a>
                </div>
                 <div class="a">
                    <a href="#" class="clearfix">
                           <img src="img/jxzt04.jpg" alt="">
                            <div class="bg"></div>
                            <section class="zhezao">
                                    <h2>和啤酒有关</h2>
                                    <b>啤酒是如何拯救世界的</b>
                        </section>
                   </a>
                </div>
                

            </div>
        </div>
        <div class="info-2">
            <div class="info-2-top clearfix">
                <div><span class="s12"></span> 商用海报
                </div>
                <div class="zi">
                    <li><a href="#">招聘海报</a></li>
                    <li><a href="#">配图海报</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">促销海报</a></li>
                    <li><a href="#">原创插画</a></li>
                </div>
                <a href="#" class="f">更多 >></a>
            </div>
            <div class="info-2-img">
                <a href="#">
                    <div class="heart">
                    <span class="s14"></span>
                    <span class="s15"></span>
                </div>
                       <div class="imgabc" style="background-image:url(img/syhb01.jpg);">
                          <span class="s13"></span>
                       </div>
                        <div class="abc"></div>
                    <b>七夕情人节扁平风创意简约商业海报设计模版</b>
                </a>

                <a href="#">
                    <div class="heart">
                    <span class="s14"></span>
                    <span class="s15"></span>
                </div>
                    <div class="imgabc" style="background-image:url(img/syhb02.jpg);">
                        <span class="s13"></span>
                    </div>
                    <div class="abc"></div>
                    <b>文艺夏日时光菠萝蓝色简约海报设计微信配图</b>
                </a>

                <a href="#">
                    <div class="heart">
                    <span class="s14"></span>
                    <span class="s15"></span>
                </div>
                    <div class="imgabc" style="background-image:url(img/syhb03.jpg);">
                        <span class="s13"></span>
                    </div>
                    <div class="abc"></div>
                    <b>超清新雪糕夏日凉爽海报</b>
                </a>

                <a href="#">
                      <div class="heart">
                    <span class="s14"></span>
                    <span class="s15"></span>
                </div>
                    <div class="imgabc" style="background-image:url(img/syhb04.jpg);">
                        <span class="s13"></span>
                    </div>
                    <div class="abc"></div>
                    <b>我的前半生文艺情感海报设计</b>
                </a>

            </div>
        </div>
    </main>
    <footer class="footer container clearfix">
        <div class="footer-top">
            <div class="foot-top-left">
                <ul><strong>常见问题</strong>
                    <li><a href="#">成为特邀设计师</a></li>
                    <li><a href="#">成为原创贡献者</a></li>
                    <li><a href="#">注册登录</a></li>
                    <li><a href="#">帐号/密码</a></li>
                    <li><a href="#">充值/售后</a></li>
                    <li><a href="#">版权投诉</a></li>
                </ul>
                <ul><strong>关于千图网</strong>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">媒体报道</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">心系千图</a></li>
                    <li><a href="#">每日更新</a></li>
                </ul>
                <ul><strong>产品服务</strong>
                    <li><a href="#">官方博客</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">千图导航</a></li>
                </ul>
                <ul><strong>友情连接</strong>
                    <li><a href="#">我图网</a></li>
                    <li><a href="#">千库网</a></li>
                    <li><a href="#">摄图网</a></li>
                    <li><a href="#">包图网</a></li>
                    <li><a href="#">视达网</a></li>
                    <li><a href="#">更多>></a></li>
                </ul>
            </div>
            <div class="foot-top-right">
                <h5><a href="#">客服咨询</a></h5>
                <p class="b"><span class="s5"></span>400-998-7011 <span style="font-size:14px;color:#888;">（9:00-18:00）</span></p>
                <p class="b"><span class="s6"></span>feedback@pic.com</p>
                <div class="dian"><span class="s7"></span>点我交谈</div>
            </div>
        </div>
        <hr>
        <div class="footer-bottom ">
            <div class="footer-bottom-left">
                <span class="s8"></span>
                <span class="s9"></span>
                <a href="#">注册声明</a>
                <a href="#">版权声明</a>
                <a href="#">售后服务</a>
            </div>
            <div class="footer-bottom-right clearfix">
                <span>Copyright ©2013-2017 千图网</span>
                <span><a href="#">沪ICP备10011451号-6</a></span>
                <span class="s10"></span>
                <span>上海工商 安全实名验证 信用网站</span>
            </div>
        </div>
    </footer>
</body>

</html>
<script>
    window.onload = function () {
        var arr = ['#000', 'yellow', '#FDF001', '#2D9AFF', '#89DCE4', '#F9F5C5', '#000', '#F4CAD8'];

        var box = document.querySelector('.box');
        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var zhezao = document.querySelectorAll('.zhezao');
        var info1img = document.querySelectorAll('.a .clearfix img');
        var info2img = document.querySelectorAll('.info-2-img a img');
        var heart = document.querySelectorAll('.heart');

        var searchInput = document.querySelector('.search-input input');
        var searchchLi = document.querySelector('.search-input');

        searchInput.onclick= function () {
          searchchLi.style.borderColor='#30cd71';
   
        }
        searchInput.onblur = function () {
          searchchLi.style.borderColor='#999';
        }




        var index = 0;
        //上一张
        function prevImg() {
            index = index == 0 ? index = imgLis.length - 1 : index - 1;
            showImg();
        }
        // 下一张
        function nextImg() {
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }
        // 展示图片
        function showImg() {
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
                box.style.backgroundColor = '';
            }
            imgLis[index].className = 'current';
            indicatorLis[index].className = 'active';
            box.style.backgroundColor = arr[index];
        }
        // 1.自动切换图片
        var timer = setInterval(nextImg, 2000);


        // 2.图标跟随指示灯切换
        for (var i = 0; i < indicatorLis.length; i++) {
            indicatorLis[i].index = i;
            indicatorLis[i].onclick = function () {

                clearInterval(timer);
                timer = null;

                index = this.index;
                showImg();
            }
            indicatorLis[i].onmouseover = function () {
                clearInterval(timer);
                timer = null;
                // indicatorLis[this.index].className='active';
            }
            indicatorLis[i].onmouseout = function () {

                if (timer != null) {
                    return;
                }
                timer = setInterval(nextImg, 2000);
            }
        }
        box.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        box.onmouseout = function () {
            if (timer) return;
            timer = setInterval(nextImg, 1000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }

        prev.onclick = function () {
            prevImg();
        }
        next.onclick = function () {
            nextImg();
        }



var bg = document.querySelectorAll('.bg');
        for (var i = 0; i < info1img.length; i++) {
            info1img[i].index = i;
            info1img[i].onmouseover = function () {
                // console.log(j);
                zhezao[this.index] = info1img[this.index1];
                // zhezao[this.index].style.opacity = '1';
                zhezao[this.index].style.top = '0';
                zhezao[this.index].style.visiblity = 'visible';
                //  bg[this.index].style.zIndex='-0.1';
                 bg[this.index].style.backgroundColor='#000'
                 bg[this.index].style.opacity='0.3';
                zhezao[this.index].style.zIndex ='1';
               
            }
            info1img[i].onmouseout = function () {
                // bg[this.index].style.opacity='0';
                zhezao[this.index].style.visiblity = 'hidden';
                zhezao[this.index].style.top = '200px';
                zhezao[this.index].style.opacity = '0';
            }
        }

var abc = document.querySelectorAll('.abc');
        for(var i = 0;i < info2img.length;i++){
            info2img[i].index = i;
            info2img[i].onmouseover = function(){
                heart[this.index] = info2img[this.index];
                heart[this.index].style.opacity = '1';
                heart[this.index].style.top = '10px';
                 abc[this.index].style.backgroundColor='#000'
                 abc[this.index].style.opacity='0.3';
                heart[this.index].style.zIndex ='1';

            }
            info2img[i].onmouseout = function () {
                heart[this.index].style.opacity = '0';
                heart[this.index].style.top = '-45px';
                abc[this.index].style.opacity='0';
            }
        }
    }

</script>